TypeScriptin tarkat tyypit: Tiukka objektin muodon vastaavuus robustia koodia varten

TypeScript, JavaScriptin supersetti, tuo staattisen tyypityksen web-kehityksen dynaamiseen maailmaan. Vaikka TypeScript tarjoaa merkittäviä etuja tyyppiturvallisuuden ja koodin ylläpidettävyyden suhteen, sen rakenteellinen tyypitysjärjestelmä voi joskus johtaa odottamattomaan käytökseen. Tässä kohtaa "tarkkojen tyyppien" käsite astuu kuvaan. Vaikka TypeScriptissä ei ole sisäänrakennettua ominaisuutta nimeltä "tarkat tyypit", voimme saavuttaa vastaavanlaista toiminnallisuutta yhdistelemällä TypeScriptin ominaisuuksia ja tekniikoita. Tämä blogikirjoitus syventyy siihen, miten TypeScriptissä voidaan pakottaa tiukempi objektin muodon vastaavuus koodin robustiuden parantamiseksi ja yleisten virheiden estämiseksi.

TypeScriptin rakenteellisen tyypityksen ymmärtäminen

TypeScript käyttää rakenteellista tyypitystä (tunnetaan myös nimellä ankkatyypitys), mikä tarkoittaa, että tyyppien yhteensopivuus määräytyy niiden jäsenten perusteella, ei niiden deklareitujen nimien. Jos oliolla on kaikki tyypin vaatimat ominaisuudet, sitä pidetään yhteensopivana kyseisen tyypin kanssa, riippumatta siitä, onko sillä lisäominaisuuksia.

Esimerkiksi:

interface Point {
  x: number;
  y: number;
}

const myPoint = { x: 10, y: 20, z: 30 };

function printPoint(point: Point) {
  console.log(`X: ${point.x}, Y: ${point.y}`);
}

printPoint(myPoint); // Tämä toimii, vaikka myPoint-oliolla on 'z'-ominaisuus

Tässä skenaariossa TypeScript sallii `myPoint`-olion välittämisen `printPoint`-funktiolle, koska se sisältää vaaditut `x`- ja `y`-ominaisuudet, vaikka sillä onkin ylimääräinen `z`-ominaisuus. Vaikka tämä joustavuus voi olla kätevää, se voi myös johtaa hienovaraisiin bugeihin, jos vahingossa välittää olioita odottamattomilla ominaisuuksilla.

Ylimääräisten ominaisuuksien ongelma

Rakenteellisen tyypityksen väljyys voi joskus peittää virheitä. Tarkastellaan funktiota, joka odottaa konfiguraatio-oliota:

interface Config {
  apiUrl: string;
  timeout: number;
}

function setup(config: Config) {
  console.log(`API URL: ${config.apiUrl}`);
  console.log(`Timeout: ${config.timeout}`);
}

const myConfig = { apiUrl: "https://api.example.com", timeout: 5000, typo: true };

setup(myConfig); // TypeScript ei valita tässä!

console.log(myConfig.typo); //tulostaa true. Ylimääräinen ominaisuus on olemassa huomaamatta

Tässä esimerkissä `myConfig`-oliolla on ylimääräinen ominaisuus `typo`. TypeScript ei anna virhettä, koska `myConfig` täyttää yhä `Config`-rajapinnan vaatimukset. Kirjoitusvirhettä ei kuitenkaan koskaan havaita, ja sovellus ei välttämättä toimi odotetusti, jos kirjoitusvirheen oli tarkoitus olla `typoo`. Nämä näennäisesti merkityksettömät ongelmat voivat kasvaa suuriksi päänvaivoiksi monimutkaisten sovellusten debuggaamisessa. Puuttuva tai väärin kirjoitettu ominaisuus voi olla erityisen vaikea havaita, kun käsitellään sisäkkäisiä olioita.

Lähestymistapoja tarkkojen tyyppien pakottamiseen TypeScriptissä

Vaikka todellisia "tarkkoja tyyppejä" ei ole suoraan saatavilla TypeScriptissä, tässä on useita tekniikoita vastaavien tulosten saavuttamiseksi ja tiukemman objektin muodon vastaavuuden pakottamiseksi:

1. Tyyppivakuutusten käyttö `Omit`-tyypin kanssa

`Omit`-aputyyppi mahdollistaa uuden tyypin luomisen poistamalla tietyt ominaisuudet olemassa olevasta tyypistä. Yhdistettynä tyyppivakuutukseen tämä voi auttaa estämään ylimääräisiä ominaisuuksia.

interface Point {
  x: number;
  y: number;
}

const myPoint = { x: 10, y: 20, z: 30 };

// Luo tyyppi, joka sisältää vain Point-tyypin ominaisuudet
const exactPoint: Point = myPoint as Omit & Point;

// Error: Type '{ x: number; y: number; z: number; }' is not assignable to type 'Point'.
// Object literal may only specify known properties, and 'z' does not exist in type 'Point'.

function printPoint(point: Point) {
  console.log(`X: ${point.x}, Y: ${point.y}`);
}


//Korjaus
const myPointCorrect = { x: 10, y: 20 };
const exactPointCorrect: Point = myPointCorrect as Omit & Point;
printPoint(exactPointCorrect);

Tämä lähestymistapa antaa virheen, jos `myPoint`-oliolla on ominaisuuksia, joita ei ole määritelty `Point`-rajapinnassa.

Selitys: `Omit` luo tyypin, joka poistaa kaikki `Point`-tyypissä olevat avaimet `myPoint`-olion tyypistä. `& Point` leikkaa sitten tämän tyypin `Point`-tyypin kanssa, mikä olennaisesti vaatii, että olio on `Point`-tyypin mukainen. Kun olio väitetään tähän yhdistettyyn tyyppiin, kääntäjä tarkistaa ylimääräiset ominaisuudet ja antaa virheen, jos niitä löytyy. Tämä pakottaa meidät määrittelemään oikean muodon, kun alun perin määrittelemme oliomme.

2. Funktion käyttäminen olioiden luomiseen

Voit luoda tehdasfunktion, joka hyväksyy vain rajapinnassa määritellyt ominaisuudet. Tämä lähestymistapa tarjoaa vahvan tyyppitarkistuksen olion luontihetkellä.

interface Config {
  apiUrl: string;
  timeout: number;
}

function createConfig(config: Config): Config {
  return {
    apiUrl: config.apiUrl,
    timeout: config.timeout,
  };
}

const myConfig = createConfig({ apiUrl: "https://api.example.com", timeout: 5000 });

//Tämä ei käänny:
//const myConfigError = createConfig({ apiUrl: "https://api.example.com", timeout: 5000, typo: true });
//Argument of type '{ apiUrl: string; timeout: number; typo: true; }' is not assignable to parameter of type 'Config'.
// Object literal may only specify known properties, and 'typo' does not exist in type 'Config'.

Palauttamalla olion, joka on rakennettu vain `Config`-rajapinnassa määritellyistä ominaisuuksista, varmistat, ettei ylimääräisiä ominaisuuksia pääse livahtamaan mukaan. Tämä tekee konfiguraation luomisesta turvallisempaa.

3. Tyyppivartijoiden (Type Guards) käyttö

Tyyppivartijat ovat funktioita, jotka kaventavat muuttujan tyyppiä tietyssä laajuudessa. Vaikka ne eivät suoraan estä ylimääräisiä ominaisuuksia, ne voivat auttaa sinua nimenomaisesti tarkistamaan ne ja ryhtymään asianmukaisiin toimiin.

interface User {
  id: number;
  name: string;
}

function isUser(obj: any): obj is User {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    'id' in obj && typeof obj.id === 'number' &&
    'name' in obj && typeof obj.name === 'string' &&
    Object.keys(obj).length === 2 //tarkista avainten määrä. Huom: hauras ja riippuvainen User-tyypin tarkasta avainten määrästä.
  );
}

const potentialUser1 = { id: 123, name: "Alice" };
const potentialUser2 = { id: 456, name: "Bob", extra: true };

if (isUser(potentialUser1)) {
  console.log("Valid User:", potentialUser1.name);
} else {
  console.log("Invalid User");
}

if (isUser(potentialUser2)) {
  console.log("Valid User:", potentialUser2.name); //Tätä ei suoriteta
} else {
  console.log("Invalid User");
}

Tässä esimerkissä `isUser`-tyyppivartija tarkistaa paitsi vaadittujen ominaisuuksien olemassaolon, myös niiden tyypit ja *tarkan* ominaisuuksien määrän. Tämä lähestymistapa on eksplisiittisempi ja mahdollistaa virheellisten olioiden käsittelyn siististi. Ominaisuuksien määrän tarkistus on kuitenkin hauras. Aina kun `User`-tyyppiin lisätään tai siitä poistetaan ominaisuuksia, tarkistus on päivitettävä.

4. `Readonly`- ja `as const` -ominaisuuksien hyödyntäminen

Vaikka `Readonly` estää olemassa olevien ominaisuuksien muokkaamisen ja `as const` luo vain luku -tuplen tai -olion, jossa kaikki ominaisuudet ovat syvästi vain luku -tyyppisiä ja niillä on literaalityypit, niitä voidaan käyttää tiukemman määrittelyn ja tyyppitarkistuksen luomiseen yhdistettynä muihin menetelmiin. Kumpikaan ei kuitenkaan estä ylimääräisiä ominaisuuksia yksinään.

interface Options {
  width: number;
  height: number;
}

//Luo Readonly-tyyppi
type ReadonlyOptions = Readonly;

const options: ReadonlyOptions = { width: 100, height: 200 };

//options.width = 300; //virhe: 'width'-ominaisuuteen ei voi sijoittaa arvoa, koska se on vain luku -ominaisuus.

//Käyttäen as const
const config = { api_url: "https://example.com", timeout: 3000 } as const;

//config.timeout = 5000; //virhe: 'timeout'-ominaisuuteen ei voi sijoittaa arvoa, koska se on vain luku -ominaisuus.

//Ylimääräiset ominaisuudet ovat kuitenkin yhä sallittuja:
const invalidOptions: ReadonlyOptions = { width: 100, height: 200, depth: 300 }; //ei virhettä. Sallii yhä ylimääräiset ominaisuudet.


interface StrictOptions {
  readonly width: number;
  readonly height: number;
}

//Tämä aiheuttaa nyt virheen:
//const invalidStrictOptions: StrictOptions = { width: 100, height: 200, depth: 300 };
//Type '{ width: number; height: number; depth: number; }' is not assignable to type 'StrictOptions'.
//  Object literal may only specify known properties, and 'depth' does not exist in type 'StrictOptions'.

Tämä parantaa muuttumattomuutta, mutta estää vain mutaation, ei ylimääräisten ominaisuuksien olemassaoloa. Yhdistettynä `Omit`-tyyppiin tai tehdasfunktioon siitä tulee tehokkaampi.

5. Kirjastojen käyttö (esim. Zod, io-ts)

Kirjastot, kuten Zod ja io-ts, tarjoavat tehokkaita ajonaikaisia tyyppivalidointi- ja skeemanmäärittelyominaisuuksia. Näiden kirjastojen avulla voit määritellä skeemoja, jotka kuvaavat tarkasti tietojesi odotetun muodon, mukaan lukien ylimääräisten ominaisuuksien estämisen. Vaikka ne lisäävät ajonaikaisen riippuvuuden, ne tarjoavat erittäin robustin ja joustavan ratkaisun.

Esimerkki Zod-kirjastolla:

import { z } from 'zod';

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
});

type User = z.infer;

const validUser = { id: 1, name: "John" };
const invalidUser = { id: 2, name: "Jane", extra: true };

const parsedValidUser = UserSchema.parse(validUser);
console.log("Parsed Valid User:", parsedValidUser);

try {
  const parsedInvalidUser = UserSchema.parse(invalidUser);
  console.log("Parsed Invalid User:", parsedInvalidUser); // Tätä ei saavuteta
} catch (error) {
  console.error("Validation Error:", error.errors);
}

Zodin `parse`-metodi heittää virheen, jos syöte ei vastaa skeemaa, mikä estää tehokkaasti ylimääräiset ominaisuudet. Tämä tarjoaa ajonaikaisen validoinnin ja generoi myös TypeScript-tyypit skeemasta, varmistaen johdonmukaisuuden tyyppimäärittelyjesi ja ajonaikaisen validointilogiikan välillä.

Parhaat käytännöt tarkkojen tyyppien pakottamiseen

Tässä on joitain parhaita käytäntöjä, jotka kannattaa ottaa huomioon, kun pakotetaan tiukempaa objektin muodon vastaavuutta TypeScriptissä:

• Valitse oikea tekniikka: Paras lähestymistapa riippuu erityistarpeistasi ja projektivaatimuksistasi. Yksinkertaisissa tapauksissa tyyppivakuutukset `Omit`-tyypillä tai tehdasfunktiot voivat riittää. Monimutkaisemmissa skenaarioissa tai kun vaaditaan ajonaikaista validointia, harkitse kirjastojen, kuten Zodin tai io-ts:n, käyttöä.
• Ole johdonmukainen: Sovella valitsemaasi lähestymistapaa johdonmukaisesti koko koodikannassasi yhtenäisen tyyppiturvallisuuden tason ylläpitämiseksi.
• Dokumentoi tyyppisi: Dokumentoi selkeästi rajapintasi ja tyyppisi viestiäksesi tietojesi odotetusta muodosta muille kehittäjille.
• Testaa koodisi: Kirjoita yksikkötestejä varmistaaksesi, että tyyppirajoitteesi toimivat odotetusti ja että koodisi käsittelee virheellistä dataa siististi.
• Harkitse kompromisseja: Tiukemman objektin muodon vastaavuuden pakottaminen voi tehdä koodistasi robustimpaa, mutta se voi myös lisätä kehitysaikaa. Punnitse hyödyt ja kustannukset ja valitse lähestymistapa, joka on järkevin projektillesi.
• Vähittäinen käyttöönotto: Jos työskentelet suuren olemassa olevan koodikannan parissa, harkitse näiden tekniikoiden käyttöönottoa vähitellen, aloittaen sovelluksesi kriittisimmistä osista.
• Suosi rajapintoja tyyppialiasten sijaan objektien muotojen määrittelyssä: Rajapintoja suositaan yleensä, koska ne tukevat deklaraatioiden yhdistämistä (declaration merging), mikä voi olla hyödyllistä tyyppien laajentamisessa eri tiedostojen välillä.

Tosielämän esimerkkejä

Katsotaanpa joitain tosielämän skenaarioita, joissa tarkoista tyypeistä voi olla hyötyä:

• API-pyyntöjen payloadit: Kun dataa lähetetään API-rajapinnalle, on ratkaisevan tärkeää varmistaa, että payload vastaa odotettua skeemaa. Tarkkojen tyyppien pakottaminen voi estää virheitä, jotka johtuvat odottamattomien ominaisuuksien lähettämisestä. Esimerkiksi monet maksujenkäsittely-API:t ovat erittäin herkkiä odottamattomalle datalle.
• Konfiguraatiotiedostot: Konfiguraatiotiedostot sisältävät usein suuren määrän ominaisuuksia, ja kirjoitusvirheet voivat olla yleisiä. Tarkkojen tyyppien käyttö voi auttaa nappaamaan nämä kirjoitusvirheet varhaisessa vaiheessa. Jos olet määrittämässä palvelinsijainteja pilviympäristössä, kirjoitusvirhe sijaintiasetuksessa (esim. eu-west-1 vs. eu-wet-1) tulee erittäin vaikeaksi debugata, jos sitä ei havaita heti alussa.
• Datanmuunnosputket: Kun dataa muunnetaan formaatista toiseen, on tärkeää varmistaa, että tulosdata vastaa odotettua skeemaa.
• Viestijonot: Kun viestejä lähetetään viestijonon kautta, on tärkeää varmistaa, että viestin payload on validi ja sisältää oikeat ominaisuudet.

Esimerkki: Kansainvälistämisen (i18n) konfiguraatio

Kuvittele hallinnoivasi käännöksiä monikielisessä sovelluksessa. Sinulla voisi olla tällainen konfiguraatio-olio:

interface Translation {
  greeting: string;
  farewell: string;
}

interface I18nConfig {
  locale: string;
  translations: Translation;
}

const englishConfig: I18nConfig = {
  locale: "en-US",
  translations: {
    greeting: "Hello",
    farewell: "Goodbye"
  }
};


//Tämä on ongelma, koska ylimääräinen ominaisuus on olemassa, tuoden hiljaa mukaan bugin.
const spanishConfig: I18nConfig = {
  locale: "es-ES",
  translations: {
    greeting: "Hola",
    farewell: "Adiós",
    typo: "unintentional translation"
  }
};

//Ratkaisu: Omit-tyypin käyttö
const spanishConfigCorrect: I18nConfig = {
  locale: "es-ES",
  translations: {
    greeting: "Hola",
    farewell: "Adiós"
  } as Omit & Translation
};

Ilman tarkkoja tyyppejä kirjoitusvirhe käännösavaimessa (kuten `typo`-kentän lisääminen) voisi jäädä huomaamatta, mikä johtaisi puuttuviin käännöksiin käyttöliittymässä. Pakottamalla tiukemman objektin muodon vastaavuuden voit napata nämä virheet kehityksen aikana ja estää niiden päätymisen tuotantoon.

Yhteenveto

Vaikka TypeScriptissä ei ole sisäänrakennettuja "tarkkoja tyyppejä", voit saavuttaa vastaavia tuloksia käyttämällä yhdistelmää TypeScriptin ominaisuuksia ja tekniikoita, kuten tyyppivakuutuksia `Omit`-tyypillä, tehdasfunktioita, tyyppivartijoita, `Readonly`-, `as const` -määrityksiä ja ulkoisia kirjastoja kuten Zod ja io-ts. Pakottamalla tiukemman objektin muodon vastaavuuden voit parantaa koodisi robustiutta, estää yleisiä virheitä ja tehdä sovelluksistasi luotettavampia. Muista valita tarpeisiisi parhaiten sopiva lähestymistapa ja soveltaa sitä johdonmukaisesti koko koodikannassasi. Harkitsemalla näitä lähestymistapoja huolellisesti voit hallita paremmin sovelluksesi tyyppejä ja parantaa pitkän aikavälin ylläpidettävyyttä.